<template>
  <div>
    <!-- 广告区域 -->
    <div class="TVCF">
      <div class="tvcf">
        <img src="images/daiyanren.png" />
        <div class="tvcf_1">
          <form>
            <img src="images/xianzaikaishi.png" />
            <div class="tvcf_2">
              <input placeholder="输入手机号" />
              <input placeholder="验证码" />
              <a href="#"><span>获取</span></a>
              <button type="button">登录/注册</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 版心 w  -->
    <!-- 搜索框大盒子 -->
    <div class="search">
      <!-- 搜索框中间盒子 -->
      <div class="search_1 w">
        <!-- 搜索框本框 -->
        <div class="search_top">
          <select>
            <option>职位类型</option>
            <option>职位类型</option>
            <option>职位类型</option>
            <option>职位类型</option>
          </select>
          <input type="text" placeholder="搜索职位、公司" />
          <button type="button">搜索</button>
        </div>
        <!-- 搜索框下热门职位 -->
        <div class="search_bottom">
          <p>
            <span>热门职位：</span>
            <span class="color">客户经理</span>
            <span class="color">Java</span>
            <span class="color">网络工程师</span>
            <span class="color">产品运营</span>
            <span class="color">分公司代表处负责人</span>
            <span class="color">游戏策划</span>
            <span class="color">主编/副主编</span>
            <span class="color">APP推广</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 全部职位  all 全部-->
    <div class="all w">
      <div class="all_left">
        <p>
          <span class="g">技术</span>
          <a href="#"><span>Java</span></a>
          <a href="#"><span>PHP</span></a>
          <a href="#"><span>web前端</span></a>
          <a href="#"><span>算法工程师</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">产品</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">设计</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">运营</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">市场</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">人事/财务/行政</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">高级管理</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <div class="left_buttom">
          <span>显示全部职位</span>
        </div>
      </div>
      <!-- 右边图片 -->
      <div class="all_right">
        <div class="p"><img src="images/xiaoyuan.jpg" /></div>
        <div class="p"><img src="images/sjs.jpg" /></div>
        <div class="p"><img src="images/xsj.jpg" /></div>
        <div class="p"><img src="images/sf.jpg" /></div>
        <div class="p"><img src="images/nianxin.jpg" /></div>
      </div>
    </div>

    <!-- 热招职位 hot posts-->
    <div class="hot_posts w">
      <!-- 热招标题 -->
      <div class="hot_post">
        <span>热招职位</span>
      </div>
      <!--it 互联网  -->
      <div class="hot_top">
        <ul>
          <li>
            <a
              href="#"
              style="
                color: #00d7c6;
                border-bottom: 3px solid #00d7c6;
                padding-bottom: 10px;
              "
              >IT·互联网</a
            >
          </li>
          <li><a href="#">金融</a></li>
          <li><a href="#">房地产·建筑</a></li>
          <li><a href="#">教育培训</a></li>
          <li><a href="#">娱乐传媒</a></li>
          <li><a href="#">医疗健康</a></li>
          <li><a href="#">法律咨询</a></li>
          <li><a href="#">供应链·物流</a></li>
          <li><a href="#">采购贸易</a></li>
        </ul>
      </div>
      <!-- 以下职位 -->
      <div class="hot_bottom w">
        <ul>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州 </span
                    ><span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州 </span
                    ><span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
          <li>
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    图像算法工程师（社保+高...
                    <span class="img"></span>
                    <span class="xinzi">15-30K·30薪</span>
                  </p>
                  <p>
                    <span class="xiao">郑州</span>
                    <span class="xiao">| 3-5年 |</span> 本科
                  </p>
                </a>
              </div>
              <div class="bottom_2 e">
                <a href="#">
                  <img
                    src="images/yidai.jpg"
                    style="width: 30px; vertical-align: middle"
                  />
                  <span style="color: black; font-size: 13px">一代总是</span>
                  <span class="xiao" style="padding: 0 10px"
                    >医疗/护理/卫生</span
                  ></a
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 查看全部 -->
      <p class="ck">
        <a href="#">查看更多</a>
      </p>
    </div>

    <!-- 热门企业 -->
    <div class="hot_firm w">
      <div class="hot_post">
        <span>热门企业</span>
      </div>
      <ul>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="images/jd.jpg" alt="" />
              <h3>京东集团</h3>
              <p>已上市 <span> | 10000人以上 | </span> 电子商务</p>
            </div>
          </a>
          <div class="n98" style="clear: both">
            <a href="#">
              <p style="font-size: 15px">
                品类运营<span class="xinzi_1">13-20k·14 薪 </span>
              </p>
              <div>
                <span class="m"> 石家庄 新华区 石家庄北站 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 大专 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                部门经理<span class="xinzi_1">8-13k </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 1年以内 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <div class="n98">
            <a href="#">
              <p style="font-size: 15px">
                视觉设计师<span class="xinzi_1">15-30k·15 薪 </span>
              </p>
              <div>
                <span class="m"> 北京 大兴区 亦庄 </span>
                <span class="m"> 3-5年 </span>
                <span class="m"> 本科 </span>
              </div>
            </a>
          </div>
          <a href="#" class="bb">查看更多职位</a>
        </li>
        <div style="clear: both"></div>
      </ul>
      <p class="ck">
        <a href="#">查看更多</a>
      </p>
    </div>
    <!-- 查看更多 look 看 more 更多 -->
    <div class="look_more"></div>
  </div>
</template>

<script>
export default {
  name: "YHome",
};
</script>

<style lang="less" scoped></style>
